<template>
	<view>
		<!-- <page-head :title="title"></page-head> -->
		<view class="uni-flex uni-column" :hidden="isNavSearch" style="width: 100%;top: 10px;position: fixed;z-index: 9;">
			<!-- #ifdef APP-PLUS -->
			<view class="uni-status-bar"></view>
			<!-- #endif -->
			<view class="input-view-container">
				<view class="input-view">
					<icon type="search" size="18" color="#666666"></icon>
					<input class="input" type="text" placeholder="输入搜索关键词"/>
				</view>
				<view style="background: #1AAD19;color: #FFFFFF;margin-left: 20px;border-radius: 10px;text-align: center;width: 80px;height: 50px;line-height: 50px;font-size: 24px;">搜索</view>
			</view>
		</view>
		
		<view>
			<swiper autoplay="true" indicator-dots="true" circular="true" style="height: 400px;">
				<swiper-item v-for="item in bannerList" :key="item" @tap="goNewsDetail(item)">
					<image style="height: 400px;width: 100%" :src="item.thumb"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="uni-grid-4">
			<view class="uni-grid-4-item" hover-class="uni-grid-4-item-hover" v-for="item in cateList" :key="item" @tap="goDetail(item)">
				<image class="uni-grid-4-image" :src="item.icon"></image>
				<text class="uni-grid-4-text">{{item.name}}</text>
			</view>
		</view>
		
		<view class="uni-flex uni-row hot-container">
			<view class="text" style="width: 60px;height: 100px;display: flex; justify-content: center;align-items: center;">
				<image class="hot-image" src="../../../static/home_header_leftactivity@2x.png"></image>
			</view>
			<text class="hot-text">热门卡</text>
		</view>
		
		<view class="uni-flex uni-column" style="justify-content: center;align-items: center;">
			<view style="padding: 15px 20px;width: 100%;box-sizing: border-box;background: #FFFFFF;">
				<view style="width: 100%;display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;border-radius: 40px;">
					<image style="width: 100%;" src="https://bjpaytest.xiaoxiangxjz.com/uploads/20180611/46e4b042e1781a0824e9f54a77acd082.png"></image>
					<view class="uni-flex uni-row" style="width: 100%;position: absolute;bottom: 0px;left: 0;background: rgba(0, 0, 0, 0.4);">
						<view class="online-after" style="flex: 1;height: 80px;line-height: 80px;font-size: 25px;text-align: center;color: #FFFFFF;">在线购卡</view>
						<view style="width: 10px;overflow: hidden;color: #FFFFFF;height: 80px;line-height: 80px;font-size: 32px;text-align: center;">|</view>
						<view style="flex: 1;height: 80px;line-height: 80px;font-size: 25px;text-align: center;color: #FFFFFF;">实体卡激活</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="uni-flex uni-row hot-container">
			<view class="text" style="width: 60px;height: 100px;display: flex; justify-content: center;align-items: center;">
				<image class="hot-image" src="../../../static/home_header_leftactivity@2x.png"></image>
			</view>
			<text class="hot-text">场馆展示</text>
		</view>
		
		<view class="uni-flex uni-column" style="justify-content: center;align-items: center;">
			<view style="padding: 15px 20px;width: 100%;box-sizing: border-box;background: #FFFFFF;border-bottom: 1px solid #eee;" v-for="item in venueList" :key="item" @tap="goVenueDetail(item)">
				<view class="uni-flex uni-column" style="width: 100%;justify-content: center;align-items: center;overflow: hidden;">
					<image style="width: 100%;border-radius: 40px;" :src="item.thumb"></image>
					<view class="uni-flex uni-row" style="width: 100%;justify-content: space-between;">
						<view style="flex: 1;height: 50px;line-height: 50px;font-size: 25px;text-align: left;">{{item.name}}</view>
						<view style="flex: 1;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
							<view style="width: 160px;border: 1px solid #FF0000;overflow: hidden;border-radius: 10px;height: 32px;line-height: 32px;font-size: 20px;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
								<text style="flex: 1;color: #FF0000;text-align: center;">免费</text>
								<text style="flex: 1;color: #FFFFFF;text-align: center;background: #FF0000;">预约</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import pageHead from '../../../components/page-head.vue'
	var util = require('../../../common/util.js');
	
	export default {
		data() {
			return {
				title: 'audio',
				isNavSearch: false,
				bannerList: [],
				cateList: [],
				venueList: [],
			}
		},
		onLoad: function(option){
			let homeData = this.getHomeData();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getHomeData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll:function(option){
			if (option.scrollTop >=100) {
				this.isNavSearch = true;
			} else {
				this.isNavSearch = false;
			}
		},
		methods: {
			async getHomeData() {
				let data = await this.getData();
				this.bannerList = data.data.bannerList;
				this.cateList = data.data.cateList;
				this.venueList = data.data.venueList;
			},
			getData() {
				return new Promise((res) => {
					util.apiPost('Index/index',{}).then((result) => {
						res(result);
					})
				})
			},
			goDetail(e) {
				let path = e.url;
				let url = ~path.indexOf('http') ? path : '';
				if (url != '') {
					uni.navigateTo({
						url: '/pages/test/open-view/open-view?name='+e.name+'&url='+encodeURIComponent(url)
					});
				}
			},
			goNewsDetail(e) {
				let path = e.url;
				let url = ~path.indexOf('http') ? path : '';
				if (url != '') {
					uni.navigateTo({
						url: '/pages/test/open-view/open-view?name='+e.title+'&url='+encodeURIComponent(url)
					});
				}
			},
			goVenueDetail(e) {
				uni.navigateTo({
					url: '/pages/test/venue-detail/venue-detail?id='+e.id
				});
			}
		},
		components: {
			pageHead
		}
	}
</script>
<style>
	@import "../../../common/uni.css";

	.swiper-item {
		display: block;
		height: 100%;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40px;
		margin-bottom: 0;
	}
	
	.uni-status-bar {
		display: block;
		width: 100%;
		height: 20px;
		height: var(--status-bar-height);
	}
	
	/* 四宫格 */
	
	.uni-grid-4 {
		background: #FFFFFF;
		width: 750px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.uni-grid-4-item {
		width: 25%;
		height: 160px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-color: #eee;
		box-sizing: border-box;
	}
	
	.uni-grid-4-image {
		width: 80px;
		height: 80px;
	}
	
	.uni-grid-4-text {
		width: 180px;
		line-height: 50px;
		height: 50px;
		text-align: center;
		font-size: 20px;
	}
	
	.uni-grid-4-item-hover {
		background: rgba(0, 0, 0, 0.1);
	}
	
	.hot-container{
		background: #FFFFFF;
		width: 750px;
		height: 100px;
		padding: 0 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
	}
	
	.hot-image{
		height: 40px;
		width: 40px;
	}
	
	.hot-text{
		height: 100px;
		line-height: 100px;
		font-size: 30px;
	}
	
	.page-section-title {
		padding: 0;
		margin-top: 60px;
		position: relative;
	}
	
	.info {
		position: absolute;
		right: 0;
		color: #353535;
		font-size: 30px;
	}
	.input-view-container {
		/* width: 100%;
		top: 0;
		position: fixed;
		z-index: 9; */
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	.input-view {
		flex: 1;
		z-index: 9;
		align-items: center;
		justify-content: flex-start;
		display: flex;
		flex-direction: row;
		background: rgba(255,255,255,.8);
		height: 50px;
		border-radius: 15px;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	.input {
		flex: 1;
		padding: 0 5px;
		font-size: 24px;
	}
</style>